<template>
	<view class="keyborad" :style="{transform:show_key?'translateY(0)':'translateY(100%)'}">
		<view class="key_main">
			<view class="main_title">
				<text>请选择约玩项目</text>
				<!-- <image src="@/static/common/del_1.png" mode="aspectFill" @tap="hideFun"></image> -->
			</view>

			<view class="main_keyboard">
				<view class="key_num" v-for="item in list" :key="item.id" @tap="inputNumFun(item)">
					<view class="key_num" :class="item.id == select.id?'select-item':'' ">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			show_key: {
				type: Boolean,
				default: false
			},
			select: {
				type: Object,
				default: ()=>{
					return {}
				},
			},
		},

		computed: {
			...mapGetters([

				'getProjectType'
			])
		},
		data() {
			return {

				numberArray: [1, 2, 3, 4, 5, 6, 7, 8, 9], //密码键盘的数字
				password: '', //密码
			}
		},
		mounted() {
			console.log(this.getProjectType);
		},
		methods: {
			inputNumFun(item) {
				this.$emit('getProgect', item)
				// this.hideFun()
			},
			delNumFun() {
				if (this.password.length == 0) return
				this.password = this.password.substring(0, this.password.length - 1)
				console.log("删除后的结果", this.password)
			},
			forgetFun() {
				uni.showToast({
					title: '忘记密码操作',
					icon: 'none'
				})
			},
			hideFun() {
				console.log("close")
				this.$emit('hideFun')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-item{
		background:skyblue ;
		color:#fff;
		border: 1upx solid skyblue;
	}
	.keyborad {
		width: 100vw;
		height: 100vh;
		position: fixed;
		bottom: 0px;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		transform: translateY(100%);
		transition: all 0.4s;

		.key_main {
			width: 100vw;
			height: 900rpx;
			background: #fff;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.main_title {
				font-size: 34rpx;
				color: #000000;
				height: 100rpx;
				display: flex;
				align-items: center;
				letter-spacing: 2rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0px 20rpx;
				border-bottom: 2rpx solid #e1e1e1;

				image {
					width: 48rpx;
					height: 48rpx;
					position: relative;
					z-index: 10
				}

				text {
					flex: 1;
					margin-left: -48rpx;
					display: flex;
					justify-content: center;
				}
			}

			.main_content {
				width: 100%;
				box-sizing: border-box;
				padding: 0px 30rpx;
				// margin-top: 40rpx;

				.content_num {
					width: 100%;
					height: 100rpx;
					border: 2rpx solid #DBDBDB;
					border-radius: 10rpx;
					display: flex;
					align-items: center;

					.content_item {
						flex: 1;
						height: 100%;
						border-right: 2rpx solid #DBDBDB;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.content_item:last-child {
						border-right: none
					}
				}

				.main_forget {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					font-size: 28rpx;
					color: #007AFF;
					margin-top: 40rpx
				}
			}

			.main_keyboard {
				width: 100%;
				height: 800rpx;
				background: #FFFFFF;
				display: flex;
				flex-flow: wrap;

				.key_null,
				.key_del {
					background: #e2e7eb;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.key_num,
				.key_null,
				.key_del,
				.key_0 {
					width: 250rpx;
					height: 125rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.key_num {
					border-right: 2rpx solid #f1f4f4;
					border-bottom: 2rpx solid #f1f4f4;
					box-sizing: border-box;
				}

				.key_num:nth-child(8) {
					border-bottom: none;
				}

				.key_0 {
					border-top: 2rpx solid #f1f4f4
				}
			}
		}
	}
</style>